<template>
  <div>
    <van-nav-bar title="一对一辅导" left-arrow @click-left="back">
      <template #right>
        <van-icon name="search" size="20" color="#000" />
      </template>
    </van-nav-bar>

    <!-- xiahua -->
    <div class="dy-content">
      <div class="dy-options">
        <ul>
          <li
            @click="toggle(item)"
            :class="{'active':item.active}"
            v-for="(item,index) in opt_List"
            :key="index"
          >
            {{item.title}}
            <van-icon v-show="!item.active" name="arrow-down" />
            <van-icon v-show="item.active" name="arrow-up" />
          </li>
        </ul>
      </div>

      <!-- xiala -->
      <div>
        <keep-alive>
          <component
            @condoff="oncondoff"
            @off="off"
            @reset="onreset"
            :list="dy_List"
            :is="comm"
          ></component>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import { oto, otocondition } from "../../request/http";
import Time from "../../components/My/oto/Time";
import Condition from "../../components/My/oto/Condition";
import TeacherList from "../../components/My/oto/TeacherList";
export default {
  name: "",
  data() {
    return {
      dy_List: [],
      comm: TeacherList,
      opt_List: [
        {
          title: "选择上课时间",
          active: false,
          comm: "Time"
        },
        {
          title: "选择老师条件",
          active: false,
          comm: "Condition"
        }
      ],
      params: {
        page: 1,
        limit: 10,
        teacher_name: this.$store.state.OtoSear
      }
    };
  },
  props: [],
  components: {
    Time,
    TeacherList,
    Condition
  },
  mounted() {
    if (this.$store.state.OtoSear) {
      oto(this.params).then(res => {
        console.log(res);
        this.dy_List = res;
      });
    } else {
      oto().then(res => {
        this.dy_List = res;
      });
    }

    
  },
  updated() {
    if (this.comm == "Condition") {
      document.body.style.background = "#fff";
    }
  },
  methods: {
    //获取数据
    getinfo() {
      otocondition().then(res => {
        console.log(res);
        this.conobj = res;
      });
    },
    //   返回
    back() {
      this.$router.go(-1);
    },
    oncondoff(v) {
      this.comm = "TeacherList";
      oto(v).then(res => {
        this.dy_List = res;
      });
      this.opt_List.map(v => (v.active = false));
    },
    onreset() {
      oto().then(res => {
        this.dy_List = res;
      });
      this.comm = "TeacherList";
      this.opt_List.map(v => (v.active = false));
    },
    off(v) {
      this.comm = "TeacherList";
      this.dy_List = v;
      this.opt_List.map(v => (v.active = false));
    },
    toggle(item) {
      if (item.active) {
        this.comm = "TeacherList";
        this.opt_List.map(v => (v.active = false));
        return;
      }
      this.opt_List.map(v => {
        v.comm == item.comm ? (v.active = true) : (v.active = false);
      });
      this.comm = item.comm;
    }
  }
};
</script>

<style scoped>
.active {
  color: #eb6100 !important;
}
.dy-options {
  width: 100%;
  height: 45px;
  background: #fff;
}
.dy-options > ul {
  display: flex;
  align-items: center;
}
.dy-options > ul > li {
  flex: 1;
  text-align: center;
  font-size: 15px;
  line-height: 45px;
  color: #777;
}
</style>